import React from 'react';
import { Card, Typography, Space, Button, message } from 'antd';
import { useAuthStore } from '../stores/auth';

const { Text, Title } = Typography;

/**
 * 认证调试组件 - 仅在开发环境显示
 */
export const AuthDebugger: React.FC = () => {
  const { isAuthenticated, user, token } = useAuthStore();

  // 生产环境不显示
  if (import.meta.env.MODE === 'production') {
    return null;
  }

  const checkAuth = () => {
    const localToken = localStorage.getItem('token');
    const authState = {
      storeAuthenticated: isAuthenticated,
      storeUser: !!user,
      storeToken: !!token,
      localStorageToken: !!localToken,
      tokenMatch: token === localToken,
    };
    
    console.log('认证状态调试:', authState);
    console.log('LocalStorage Token:', localToken);
    console.log('Store Token:', token);
    console.log('User Info:', user);
    
    message.info('认证状态已打印到控制台');
  };

  const clearAuth = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    message.success('已清除认证信息');
    window.location.reload();
  };

  return (
    <Card 
      size="small" 
      style={{ 
        position: 'fixed', 
        top: 10, 
        right: 10, 
        width: 300, 
        zIndex: 9999,
        border: '2px solid #ff4d4f',
        backgroundColor: '#fff2f0'
      }}
    >
      <Title level={5} style={{ margin: 0, color: '#ff4d4f' }}>
        🐛 认证调试器 (开发环境)
      </Title>
      <Space direction="vertical" size="small" style={{ width: '100%' }}>
        <Text>认证状态: {isAuthenticated ? '✅ 已认证' : '❌ 未认证'}</Text>
        <Text>用户信息: {user ? '✅ 存在' : '❌ 不存在'}</Text>
        <Text>Store Token: {token ? '✅ 存在' : '❌ 不存在'}</Text>
        <Text>Local Token: {localStorage.getItem('token') ? '✅ 存在' : '❌ 不存在'}</Text>
        <Space>
          <Button size="small" onClick={checkAuth}>检查状态</Button>
          <Button size="small" danger onClick={clearAuth}>清除认证</Button>
        </Space>
      </Space>
    </Card>
  );
};